<template>
  <div id="header" v-show="isShow">
    <Header></Header>
  </div>
  <div class="main_header_1 " v-show="isShow">
    <div class="e_info">

      <p class="enterprise_txt enterprise_name">{{businessName}}</p>

      <p class="enterprise_txt">
        <span class="enterprise_detail">性质：{{eNature}}</span>
        <span class="enterprise_detail">规模：{{eSize}}人</span>
        <span class="enterprise_detail">行业：{{eIndustry}}</span>
      </p>

    </div>

  </div>
  <div id="main" class="inner_1 home-inner_1" v-show="isShow">
    <div class="e_detail">
      <div class="card">
        <div class="card_title">
          公司介绍
        </div>
        <p class="describe">
          {{eContent}}
        </p>
      </div>
      <div class="card">
        <p class="card_title">公司优势</p>
        <ul class="advantages">
          <li class="advantage" v-for="(item,index) in eAdvantage" :key="index">
            {{eAdvantage[index]}}
          </li>
        </ul>
      </div>
      <div class="card">
        <p class="card_title">联系方式及地址</p>
        <p class="enterprise_contact_mode">联系人：<span class="contact_span">{{contactName}}</span></p>
        <p class="enterprise_contact_mode">联系电话： <span class="contact_span">{{contactPhone}}</span></p>
        <p class="enterprise_contact_mode">联系邮箱： <span class="contact_span">{{contactEmail}}</span></p>
        <p class="enterprise_contact_mode">联系地址： <span class="contact_span">{{contactAddress}}</span></p>
      </div>
      <div class="card business_info">
        <p class="card_title">工商信息</p>
        <ul class="business_info_warpper">
          <li class="business_info_sub">公司全称：
            <span>{{businessName}}</span>
          </li>
          <li class="business_info_sub">成立时间：
            <span>{{businessSetTime}}</span>
          </li>
          <li class="business_info_sub">注册资本：
            <span>{{businessRegCapital}}万元</span>
          </li>
          <li class="business_info_sub">法人代表：
            <span>{{businessLegalRepresentative}}</span>
          </li>
        </ul>
      </div>
    </div>

  </div>
</template>
<script lang='ts'>
import { onMounted, ref, reactive, getCurrentInstance, watch, onBeforeMount,toRefs, computed, isShallow } from 'vue';
import { getOneEInfo } from "@/api/authApi"
import { useStore } from "vuex"
import { useRoute } from 'vue-router';
import Header from "@/components/Header.vue"
export default {
  name: 'PostionInfoPage',
  setup() {
    const route = useRoute()
    const store = useStore()
    const estate = store.state.eState.Es
    // @ts-ignore
    const { proxy } = getCurrentInstance() // 1.获取proxy实例
   
    const isShow=ref(false)
    const e=store.state.eState.e

    const initData1={
      
      eId: computed(() =>e.eId),
      eContent: computed(() =>e.eContent),
      // 公司规模
      eSize: computed(() =>e.eSize),

      eNature: computed(() =>e.eNature),
      eIndustry: computed(() =>e.eNature),
      eAdvantage: computed(() =>e.eAdvantage),
      contactName: computed(() =>e.contactName),
      contactPhone: computed(() =>e.contactPhone),
      contactEmail:computed(() =>e.contactEmail),
      contactAddress: computed(() =>e.contactAddress),

      businessName: computed(() =>e.businessName),
      businessSetTime: computed(() =>e.businessSetTime),
      // 注册资本
      businessRegCapital: computed(() =>e.businessRegCapital),
      // 法人代表
      businessLegalRepresentative: computed(() =>e.businessLegalRepresentative),
      
    }

    const init = async () => {

      const newData = {
        eId: route.query.eId
      }
      await getOneEInfo(newData).then((res: any) => {
        if (res.data["code"] == "200") {
          // console.log(res.data["message"]);
          e.eId=res.data["eId"]
          e.eContent=res.data["eContent"]
          e.eSize=res.data["eSize"]
          e.eNature=res.data["eNature"]
          e.eIndustry=res.data["eIndustry"]
          e.eAdvantage=res.data["eAdvantage"]
          e.contactName=res.data["contactName"]
          e.contactPhone=res.data["contactPhone"]
          e.contactEmail=res.data["contactEmail"]
          e.contactAddress=res.data["contactAddress"]
          e.businessName=res.data["businessName"]
          e.businessSetTime=res.data["businessSetTime"]
          e.businessRegCapital=res.data["businessRegCapital"]
          e.businessLegalRepresentative=res.data["businessLegalRepresentative"]
          // console.log(aaa.value.eId);
          

        }
      })
    }

    onBeforeMount(async () => {
      await init()
      await initData1
      isShow.value=true
     

    })
    return {
      Header,
      isShow,
      ...initData1
    }
  }
}
</script>
<style scoped>
.e_detail {
  min-width: 1000px;
  background-color: #FFF;
}

.card {
  padding-top: 20px;
  padding-left: 20px;
  /* height: auto; */
  padding-right: 20px;
  /* padding-top: 10px;
  padding-left: 20px; */
  height: auto;
  min-height: 100px;
}

/* 工商信息 */
.business_info_sub {
  width: 50%;
  float: left;
  margin-top: 15px;
  margin-bottom: 5px;
}

.business_info {
  height: 180px !important;
}

.business_info_warpper {
  font-size: 16px;
}

/* 公司介绍 */
.describe {
  font-size: 16px;
  line-height: 20px;
  text-indent: 2em;
  padding-right: 2px;
  white-space: pre-wrap;
  color: #4c4c4c;
  /* margin-top:50px; */
}

/* 联系方式 */
.contact_span {
  color: #4c4c4c;
}

.enterprise_contact_mode {
  font-size: 16px;

  color: #a6a6a6;
  line-height: 24px;
}

.card_title {
  font-size: 22px;
  margin-bottom: 20px;
}


.advantage {
  float: left;
  font-size: 14px;
  padding: 6px 10px;
  /* margin-left: ; */
  /* width: 120px; */
  color: #9497a1;
  border: 1px solid rgba(148, 151, 161, .3);
  border-radius: 2px;
  margin-right: 10px;
  /* margin-top: 15px; */
}

.enterprise_detail {
  padding-left: 10px;
  padding-right: 10px;
  border-right: 1px solid rgb(191, 193, 188);
  width: 100px;
}

.enterprise_name {
  color: #2052a4;
  padding-left: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 28px;
}

.enterprise_txt {
  margin-bottom: 12px;
  /* margin-left: 125px; */

}

.e_info {
  min-width: 1000px;

}

.main_header_1 {
  height: 100px;
  width: 100%;
  background-color: #cfd2d5;
  display: flex;

  align-items: center;
  justify-content: space-around;
}


.inner_1 {
  width: 1000px;
  margin: 0 auto;
}

.home-inner_1 {
  max-width: 1000px;
}

#header {
  font-family: '微软雅黑';
  height: 58px;
  background-color: #545c64;
}

#main {
  margin-top: 25px;
  height: 1200px;
  display: flex;
}
</style>